<template>
  <div class="tags">
    <div class="tags-main" v-for="tag in props.tags" :key="tag.tagName">
      <div class="tags-title" v-if="showTagName">
        <span>{{ tag.tagName }}</span>
      </div>
      <div
        class="tags-item"
        v-for="(item, index) in tag.tag"
        :key="item.id"
        @click="select(item, tag)"
      >
        <span
          :style="{ '--bg-color': getColor(index)}"
          :class="[item.action ? 'select-tag' : 'unselect-tag']"
          >{{ item.value }}</span
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(["change-select"]);
interface Tag {
  id: number;
  value: string;
  action?: boolean;
}
interface Tags {
  tagName: string;
  tag: Tag[];
}
const props = defineProps({
  tags: {
    type: Array<Tags>,
    default: () => [],
  },
  showTagName: {
    type: Boolean,
    default: true,
  },
  colors: {
    type: Array<string>,
    default: () => ["#4949BC", "#006400", "#2F4F4F", "#A52A2A", "#930687"],
  }
});

// 颜色数组
const color = props.colors;
const getColor = (index: number) => {
  return color[index % color.length];
};

const select = (item: any, tags: Tags) => {
  tags.tag.map((tag: Tag) => {
    if (tag.id !== item.id) {
      tag.action = false;
    } else {
      item.action = !item.action;
    }
  });
  emit("change-select", item, tags.tagName, item.action);
};
</script>
<style lang="scss" scoped>
.select-tag {
  background-color: var(--bg-color);
  filter: brightness(1.1);
}
.unselect-tag {
  background-color: gray;
}
.tags-title {
  @include flex();
  margin: 0 10px 10px 0;
  width: 3rem;
  span {
    font-weight: 550;
  }
}
.tags {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .tags-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    .tags-item {
      @include flex();
      cursor: pointer;
      margin: 0 5px 5px 0;
      span {
        color: #ffffff;
        padding: 5px 5px;
        font-size: 0.8rem;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
      }
    }
    .tags-item:hover {
      &:hover {
        border-radius: 5px;
        filter: brightness(1.1);
        background-color: black;
      }
    }
  }
}
</style>
